<script setup lang='ts'>
import { computed, ref, watch } from "vue";
import darkIcon from "@/assets/svg/dark.svg?component";
import dayIcon from "@/assets/svg/day.svg?component";
import TranslationIcon from "@/components/ReTranslateIcon";
import Typed from "@/components/ReTyped";
import { useNav } from "@/layout/hooks/useNav";
import { useTheme } from "@/layout/hooks/useTheme";
import { useConfigStore } from "@/stores/config";
import { useUserStore } from "@/stores/user";
import Login from "@/views/login/components/LoginAccount.vue";
import LoginPhone from "@/views/login/components/LoginPhone.vue";
import LoginQrCode from "@/views/login/components/LoginQrCode.vue";
import LoginRegist from "@/views/login/components/LoginRegist.vue";
import Motion from "@/views/login/utils/motion";
import { avatar, dot } from "@/views/login/utils/static";

// Note[vue]: 会根据当前组件的名称自动命名
defineOptions({
    name: "Login",
});

const { title } = useNav(); // 获取项目标题

const hasLanguageChange = ref<boolean>(false); // 是否有语言切换
watch(() => useConfigStore().config.Locale, () => {
    hasLanguageChange.value = true;
});

// Note[pinia] 通过pinia获取的数据默认没有响应式，需要通过computed包装
const currentPage = computed(() => useUserStore().currentPage);

const { isDark, darkModeChange } = useTheme();
darkModeChange(); // 每次刷新时都执行一下
</script>

<template>
    <div class="select-none">
        <!-- 背景dot，fix定位 -->
        <dot class="left-irregular-dot" />
        <dot class="right-irregular-dot" />

        <!-- 右上角切换暗夜模式，设置国际化 -->
        <div class="flex-center absolute top-3 right-5">
            <el-switch
                v-model="isDark"
                inline-prompt
                :active-icon="dayIcon"
                :inactive-icon="darkIcon"
                @click="darkModeChange"
            />
            <TranslationIcon />
        </div>

        <div class="login-container">
            <div class="login-box">
                <div class="login-form">
                    <!-- logo图片 -->
                    <avatar class="avatar" />
                    <!-- 标题 -->
                    <Motion>
                        <h2 class="h-[43px]">
                            <Typed
                                v-if="!hasLanguageChange"
                                id="typed"
                                :options="{
                                    strings: title.length > 6 ? [title.slice(2, 6), title] : [title],
                                    typeSpeed: 100,
                                    backSpeed: 50,
                                    showCursor: false
                                }"
                            />
                            <span v-else>{{ title }}</span>
                        </h2>
                    </Motion>
                    <!-- 账号密码登录 -->
                    <Login v-if="currentPage === 0" />
                    <LoginPhone v-if="currentPage === 1" />
                    <LoginQrCode v-if="currentPage === 2" />
                    <LoginRegist v-if="currentPage === 3" />
                </div>
            </div>
        </div>

        <!-- 版权信息 -->
        <div
            class="w-full flex-center absolute bottom-3 text-sm text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
        >
            Copyright © 2020-present
            <a class="hover:text-primary" href="#" target="_blank">
                &nbsp;{{ title }}
            </a>
        </div>
    </div>
</template>

<style lang='scss' scoped>
@use "@/style/login.scss";

:deep(.el-input-group__append, .el-input-group__prepend) {
    padding: 0;
}

.translation {
    ::v-deep(.el-dropdown-menu__item) {
        padding: 5px 40px;
    }

    .check-zh {
        position: absolute;
        left: 20px;
    }

    .check-en {
        position: absolute;
        left: 20px;
    }
}
</style>
